<!--<template>-->
<!--  <view class='address' @click='onChangeAddress'>-->
<!--    <input class='choose-address' placeholder='请选取地点' value='{{chooseAddress}}'></input>-->
<!--  </view>-->
<!--</template>-->

<!--<script setup>-->
<!--import {ref} from 'vue';-->

<!--const onChangeAddress = () => {-->
<!--  wx.getSetting({-->
<!--    success(res) {-->
<!--      console.log('res是否开启授权', res)-->
<!--      var statu = res.authSetting;-->
<!--      if (!statu['scope.userLocation']) {-->
<!--        wx.authorize({-->
<!--          scope: 'scope.userLocation',-->
<!--          success() {-->
<!--            // console.log('前用户发起授权请求')-->
<!--            wx.chooseLocation({-->
<!--              success: res => {-->
<!--                console.log('打开地图选择位置确定', res)-->
<!--              },-->
<!--              fail: res => {-->
<!--                console.log('打开地图选择位置取消', res)-->
<!--              }-->
<!--            })-->
<!--          },-->
<!--          fail() {-->
<!--            // 用户点击不允许引导重新获取授权-->
<!--            console.log('用户点击不允许引导重新获取授权')-->
<!--          }-->
<!--        })-->
<!--      } else {-->
<!--        // 已经授权了就会直接进入地图-->
<!--        wepy.chooseLocation({-->
<!--          success: res => {-->
<!--            console.log('打开地图选择位置确定', res)-->
<!--          },-->
<!--          fail: res => {-->
<!--            console.log('打开地图选择位置取消', res)-->
<!--          }-->
<!--        })-->
<!--      }-->
<!--    }-->
<!--  })-->
<!--}-->


<!--const selectedPriority = ref('');-->
<!--const selectedText = ref('请选择优先级');-->
<!--const selectedColor = ref('black');-->
<!--const dropdownOpen = ref(false);-->
<!--const options = ref([-->
<!--  {value: '1', text: '优先级1', color: 'red'},-->
<!--  {value: '2', text: '优先级2', color: 'yellow'},-->
<!--  {value: '3', text: '优先级3', color: 'blue'},-->
<!--  {value: '4', text: '优先级4', color: 'green'},-->
<!--]);-->

<!--const toggleDropdown = () => {-->
<!--  dropdownOpen.value = !dropdownOpen.value;-->
<!--};-->

<!--const selectOption = (option) => {-->
<!--  selectedPriority.value = option.value;-->
<!--  selectedText.value = option.text;-->
<!--  selectedColor.value = option.color;-->
<!--  dropdownOpen.value = false;-->
<!--};-->

<!--const handleSubmit = () => {-->
<!--  console.log('提交的优先级:', selectedPriority.value);-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.form-group {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  gap: 10px;-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.select-wrapper {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 10px;-->
<!--  position: relative;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.selected-text {-->
<!--  padding: 5px;-->
<!--  border: 1px solid #ccc;-->
<!--  border-radius: 4px;-->
<!--  outline: none;-->
<!--  font-size: 14px;-->
<!--  flex-grow: 1;-->
<!--}-->

<!--.dropdown {-->
<!--  position: absolute;-->
<!--  top: 100%;-->
<!--  left: 0;-->
<!--  width: 100%;-->
<!--  background-color: white;-->
<!--  border: 1px solid #ccc;-->
<!--  border-radius: 4px;-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);-->
<!--  z-index: 1000;-->
<!--}-->

<!--.dropdown-item {-->
<!--  padding: 10px;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.dropdown-item:hover {-->
<!--  background-color: #f0f0f0;-->
<!--}-->
<!--</style>-->
<template>
  <view class="">
    <uni-forms :modelValue="form">
      <uni-forms-item label="姓名" name="name">
        <uni-easyinput v-model="formData.name" placeholder="请输入姓名" type="text"/>
      </uni-forms-item>
    </uni-forms>
    <button @click="submitForm">Submit</button>
  </view>
</template>

<script setup>
import {ref} from 'vue';
import {onShow} from "@dcloudio/uni-app";

const form = ref({
  name: ''
})
const rules = ref({
  // 对name字段进行必填验证
  name: {
    rules: [{
      required: true,
      errorMessage: '请输入姓名',
    },
      {
        minLength: 3,
        maxLength: 5,
        errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
      }
    ]
  }
})
const submitForm = async () => {
  console.log('submitForm')
}
onShow(async () => {
  console.log(form.value, 'ref-form');
})
</script>